<template>
	<Container class="main-index">
		<view class="statusbar"></view>
		<view class="banner">
			<image :src="bannerBg" mode="aspectFill"></image>
			<view class="context" :style="{paddingTop: systemInfo.statusBarHeight + 40 + 'rpx'}">
				<view class="other-info">
					<view class="date">今日：{{new Date().format('yyyy-MM-dd')}} {{week}}</view>
					<view class="weather">城市：{{weatherInfo.city || '-'}}  天气：<image :src="weathersIcon(weatherInfo.weather)"
							mode="widthFix" class="weatherIcon"></image> {{weatherInfo.weather}}
						{{weatherInfo.temperature_float || '-'}}℃</view>
				</view>
				<view class="title">
					<view class="month"><text class="num">{{add0(month)}}</text><text class="unit">月 · 支出</text></view>
				</view>
				<view class="money">{{disburse}}</view>
				<view class="others">
					<view class="other">
						<text class="font">预算</text>
						<text class="val">点此设置</text>
					</view>
					<view class="other">
						<text class="font">本月收入：</text>
						<text class="val val1">{{income}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item">
				<view class="icon">
					<image src="/static/day.png" mode=""></image>
				</view>
				<view class="content">
					<view class="time">今天</view>
					<view class="last">最后一笔：<text>【吃早餐】{{money(-6.00)}}</text></view>
				</view>
				<view class="record">
					<view class="disburse">{{money(-100)}}</view>
					<view class="income">{{money(20000)}}</view>
				</view>
			</view>
			<view class="item">
				<view class="icon">
					<image src="/static/week.png" mode=""></image>
				</view>
				<view class="content">
					<view class="time">本周</view>
					<view class="last">最后一笔：<text>【吃早餐】{{money(-6.00)}}</text></view>
				</view>
				<view class="record">
					<view class="disburse">{{money(-100)}}</view>
					<view class="income">{{money(20000)}}</view>
				</view>
			</view>
			<view class="item">
				<view class="icon">
					<image src="/static/month.png" mode=""></image>
				</view>
				<view class="content">
					<view class="time">本月</view>
					<view class="last">最后一笔：<text>【吃早餐】{{money(-6.00)}}</text></view>
				</view>
				<view class="record">
					<view class="disburse">{{money(-100)}}</view>
					<view class="income">{{money(20000)}}</view>
				</view>
			</view>
			<view class="item">
				<view class="icon">
					<image src="/static/year.png" mode=""></image>
				</view>
				<view class="content">
					<view class="time">本年</view>
					<view class="last">最后一笔：<text>【吃早餐】{{money(-6.00)}}</text></view>
				</view>
				<view class="record">
					<view class="disburse">{{money(-100)}}</view>
					<view class="income">{{money(20000)}}</view>
				</view>
			</view>
		</view>
	</Container>
</template>

<script>
	import weathers from '@/utils/weather.js'
	import {
		getWeatherApi,
		getIpAddrApi
	} from '@/http/common.js'
	export default {
		data() {
			return {
				systemInfo: {}, // 系统信息
				nowDate: new Date().format('MM月dd日'), // 当前时间
				bannerBg: '/static/banner.jpg', // 头部背景图片
				month: new Date().getMonth() + 1, // 当前月份
				year: new Date().getFullYear(), // 当前年份
				disburse: 701.99, // 支出
				income: 1200.55, // 收益
				curAddress: uni.getStorageSync('cur_address') || {}, // 当前定位信息
				weatherInfo: {}, // 天气信息
			}
		},
		computed: {
			week() {
				let day = new Date().getDay()
				switch (day) {
					case 0:
						return '星期天'
						break;
					case 1:
						return '星期一'
						break;
					case 2:
						return '星期二'
						break;
					case 3:
						return '星期三'
						break;
					case 4:
						return '星期四'
						break;
					case 5:
						return '星期五'
						break;
					case 6:
						return '星期六'
						break;
				}
			}
		},
		async onLoad() {
			if (!this.curAddress?.adcode) {
				await this.getIpAddress()
			}
			await this.getWeather()
			this.systemInfo = await uni.getSystemInfo()
			console.log(this.systemInfo)
		},
		methods: {
			/** 获取天气 **/
			async getWeather() {
				const {
					ok,
					data
				} = await getWeatherApi(this.curAddress?.adcode)
				if (!ok) return
				this.weatherInfo = data.lives[0] || {}
			},
			/** 获取当前定位 **/
			async getIpAddress() {
				const {
					ok,
					data
				} = await getIpAddrApi()
				if (!ok) return
				this.curAddress = data || {}
				uni.setStorageSync('cur_address', this.curAddress)
			},
			/** 获取天气图标 **/
			weathersIcon(type) {
				let icon = ''
				Object.keys(weathers).forEach((key) => {
					if (type && type.includes(key)) {
						icon = weathers[type]
					}
				})
				return icon
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main-index {

		.banner {
			position: relative;

			image {
				width: 100vw;
				height: 500rpx;
				display: block;
			}

			.context {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 2;
				background-color: rgba(0, 0, 0, 0.2);
				padding: 32rpx 32rpx 0;

				.other-info {
					display: flex;
					flex-direction: column;
					padding-bottom: 80rpx;

					.date,
					.weather {
						display: flex;
						align-items: center;
						font-size: $uni-font-size-base;
						color: #fff;
					}

					.weatherIcon {
						width: $uni-font-size-base;
						height: $uni-font-size-base;
						margin-right: 5rpx;
					}
				}

				.title {
					.month {

						.num {
							margin-right: 4rpx;
							color: $font-color2;
							font-size: $uni-font-size-title;
						}


						.unit {
							font-size: $uni-font-size-base;
							color: #fff;
						}
					}
				}

				.money {
					font-size: $uni-font-size-much-big;
					color: #fff;
					font-weight: 600;
					font-family: 'Courier New', Courier, monospace;
					padding: 10rpx 0;
				}

				.others {
					display: flex;

					.other {
						margin-right: 80rpx;

						&:last-child {
							margin-right: 0;
						}

						.font {
							font-size: $uni-font-size-base;
							margin-right: 10rpx;
							color: #fff;
							opacity: 0.8;
						}

						.val {
							font-size: $uni-font-size-base;
							color: $font-color2;
							font-weight: 600;
						}

						.val1 {
							font-size: $uni-font-size-lg;
						}
					}
				}
			}
		}

		.list {
			padding: 32rpx;
			background-color: #fff;

			.item {
				// height: 100rpx;
				padding: 20rpx 0;
				border-bottom: 2rpx solid $light-border-divide;
				display: flex;

				.icon {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;
					flex: none;

					image {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.content {
					flex: 1;

					.time {
						padding-bottom: 4rpx;
						color: inherit;
						font-weight: 600;
						font-size: $uni-font-size-base;
					}

					.last {
						opacity: 0.8;
						font-size: $uni-font-size-sm;
					}
				}

				.record {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					font-size: $uni-font-size-base;

					.disburse {
						color: red;
					}

					.income {
						color: green;
					}
				}
			}
		}
	}
</style>
